const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { ProvidePlugin } = require("webpack");
//--config ./config/common.config.js --env=development
// --config ./config/common.config.js --env=production

// new PurgeCSSPlugin({
//   path: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, { nodir: true }),
//   safelist: function () {
//     return {
//       standard: ["html"],
//     };
//   },
// }),

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  resolve: {
    extensions: [".js", ".json", ".wasm", ".ts", ".tsx"], //文件扩展
  },
  // entry: {
  //   index: {
  //     import: "./src/index.js",
  //     dependOn: "shared",
  //   },
  //   main: {
  //     import: "./src/main.js",
  //     dependOn: "shared",
  //   },
  //   shared: ["axios"], //共享的文件
  //   shared1: ["dayjs"], //共享的文件
  //   shared2: ["react"], //共享的文件
  // }, //多入口
  output: {
    path: __dirname + "/dist/", // 打包出口必须是绝对路径
    //placeholder  多入口，打包之后webpack无法识别要输出到哪个文件，需要占位符
    filename: "[name]_bundle.js",
    // assetModuleFilename:'abc.png'//打包后的静态资源重命名
    clean: true, // 在生成文件之前清空 output 目录 cleanWebpackPlugin
    chunkFilename: "[name]_chunk.js", //动态引入的文件分包名称重命名，或者单独针对分包文件
    // publicPath: "https://www.baidu.com/cdn/", //配置cdn地址
  },
  module: {
    rules: [
      {
        test: /.css$/, // 匹配打包后缀为css的文件
        use: [MiniCssExtractPlugin.loader, "css-loader"], //单独抽离css文件
        // use: ["style-loader", "css-loader"], // 顺序必须为 style-loader css-loader，loader使用顺序从右到左
        //只有一个简写
        // loader:'css-loader',
        //方式二
        // use: [{ loader: "style-loader" }],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        //对于图片，webpack内置了对于的loader
        test: /\.(png|jpg|jpe?g|svg|gif)$/,
        //打包两张图片，并且这两张图片有自己的地址
        // type:"asset/resource"
        //将图片base64编码，将编码后的源码放到js文件中
        //优缺点：相对于上面，减少http请求，不需要再去请求图片，缺点：导致js文件很大，下载时间过长，会阻塞后续解析
        //对于小图片可以base64编码，对于大文件，可以额外去请求
        // type: "asset/inline",
        type: "asset", //资源类型，webpack5内置
        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024,
          },
        },
        generator: {
          //img:生成img文件夹
          //name：指向原来的图片名称
          //ext：扩展名
          //hash：打包后生成的hash值  :8 截取8位
          filename: "image/[name]_[hash:8][ext]",
        },
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              plugins: ["@babel/plugin-transform-arrow-functions"],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack学习", //标签页对应的title
      template: "./index.html", //指定模板
    }), //生成html文档
    new MiniCssExtractPlugin(), //提取css
    // new ProvidePlugin({
    //   axios:["axios","default"],
    //   dayjs:"dayjs"
    // }),//shimming
  ],
  devServer: {
    compress: true, //是否压缩
    open: true, //是否打开浏览器
    static: ["public"],
    // hot: "only",
    proxy: {
      "/api": {
        target: "http://localhost:3000", //静态资源和api服务在同一台服务器上
        pathRewrite: {
          "/api": "",
        }, //重写路径
      },
      changeOrigin: true,
    },

    historyApiFallback: true,
  },
  //优化配置
  optimization: {
    // chunkIds: "deterministic", //"natural" "named" "deterministic"
    splitChunks: {
      // chunks: "async",//默认值，对异步加载的模块进行分包
      chunks: "all", //第三方库全部分到一个包
      // maxSize: 20000, //当一个包大于指定的大小时候，继续进行拆包
      // minSize: 100, //将包拆分不小miniSize的包
      //notice:分出来的包未必会满足上面这个区域，
      //自己对需要进行分包的内容进行分包
      cacheGroups: {
        vendors: {
          test: /[\\/]node_module[\\/]/,
          // filename: "[name]_vendors.js",
          filename: "[name]_vendors.js",
          //  filename: "[id]_vendors.js",
        },
        utils: {
          test: /utils/,
          // filename: "[name]_utils.js",
          filename: "[id]_utils.js",
        },
      },
    },
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(), //css代码简化
      new TerserPlugin({ extractComments: false }), //js代码简化压缩 extractComments注释不做抽取
    ],
  },
  //cdn打包
  externals: {
    //key:属性名 需要排除的框架名称
    //value:cdn提供的第三方包全局变量名称
    react: "React",
    axios: "axios",
    dayjs: "dayjs",
  },
};
